﻿@{
    ViewBag.Title = "Role i korisnici";
    Layout = "~/Areas/ControlPanel/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
<link href="@Styles.Url("~/Content/select2.css")" rel="stylesheet"/>
<script src="@Scripts.Url("~/Scripts/select2-3.4.0/Select2.js")"></script>

<style>
    #usernameLabel
    {
        margin-top: 5px;
        
    }
    #usernameLabel p
    {
        padding-top: 5px;
    }
</style>
<script>
    $(document).ready(function () {
        $("#usersToRolesSubmit").click(function () {

            $("#usersToRolesForm").submit();
        });
        $(".addUsersToRolesButton").click(function () {
            console.log("Clicked!");
            clearAll();
            $("#roleName").val($(this).data("role"));
            $("#modalUsersToRoles").modal();
            $("#filterUsers").typeahead({
                source: function (query, process) {
                    $.post("/ControlPanel/Home/FilterUsers", { q: query }, function (data) { process(data); });
                },
                updater: function (item) {
                    console.log(item);
                    createFormUI(item);
                    displayLabel(item);
                    return item;
                }
            });
        });
        $('#selectUsers').select2({
            placeholder: "Izaberite korisnički nalog",
            minimumInputLength: 2,
            multiple: true,
            ajax: {
                url: '@Url.Action("FilterUsers", "Home")',
                dataType: 'json',
                data: function (term, page) {
                    return {
                        q: term, // search term
                    };
                },
                results: function (data, page) {
                    // parse the results into the format expected by Select2.
                    return { results: data };
                }
            }
        });
    });

   


    function createFormUI(username) {
        var fields = $("#fieldCache input[type=hidden]");
        console.log(fields.length);
        var index = fields.length == 0 ? 0 : fields.length / 2;
        $("#fieldCache").append("<input type=hidden name=Users.Index value="+index+" /><input type=hidden name=Users[" + index + "] value="+username+" />");
    }

    function displayLabel(username) {
        $("#usernameLabel").append("<p class=><strong>" + username + "</strong></p>");
    }

    function clearAll() {
        $("#filterUsers").val("");
        $("#fieldCache").html("");
        $("#usernameLabel").html("");

    }

</script>
<h2>@ViewBag.Title</h2>
<p class="lead text-info">@ViewBag.StatusMessage</p>
<h3>Dodaj rolu</h3>
<div id="rolesAddForm">
    @using (Html.BeginForm("Roles", "Home", FormMethod.Post, new { id = "roleAddForm", @class="form-inline" })) { 
        <div class="input-append">
        @Html.TextBox("item", null, new { @class = "span2", id = "appendedInputButton" })
        <button class="btn btn-success"><i class="icon-save"></i></button>
        </div>
    }
</div>

<h3>Postojeće role</h3>
@foreach (string item in ViewBag.Roles) {
<div class="row-fluid">
    <div class="span3"><strong>@item</strong></div>
    <div class="span9 btn-group">
        <button class="btn btn-small addUsersToRolesButton" data-role="@item">Dodaj korisnike <i class="icon-user"></i></button>
        <a href="@Url.Action("Delete", "Home", new { item = item })" class="btn btn-danger btn-small">Obriši <i class="icon-remove-sign"></i></a>
    </div>
</div>
}
<div id="modalUsersToRoles" class="modal hide fade">
    <div class="modal-header"><h3>Dodaj korisnike u rolu</h3></div>
    <div class="modal-body">
        @using (Html.BeginForm("UsersToRoles", "Home", FormMethod.Post, new { @id = "usersToRolesForm" })) {
            @Html.Hidden("Role", "", new { @id = "roleName" })<br />
            <input type="text" name="Users" id="selectUsers" />            
        }
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Zatvori</button>
        <button class="btn btn-success" id="usersToRolesSubmit">Dodaj! <i class="icon-save"></i></button>
    </div>    
</div>

